<template>
  <div class="w-[300px]">
    <div class="flex justify-between mb-2">
      <div class="card-header flex gap-2">
        <span>{{ t["模板列表"] }}</span>
        <a-tag>{{ form.resolutionDesc }}</a-tag>
      </div>
      <a-pagination
        simple
        :current="query.pageNum"
        :total="query.total"
        :page-size="query.pageSize"
        @change="pageChange"
      >
      </a-pagination>
    </div>
    <div>
      <a-input-search
        v-model="query.templateName"
        :placeholder="t['请输入模板名称']"
        class="mb-2"
        @keydown.enter="search"
        allow-clear
        @search="search"
      ></a-input-search>
      <a-spin :loading="table.loading" class="w-full h-full">
        <div class="grid grid-cols-2 gap-2 w-full h-full">
          <div
            v-for="(item, key) in table.data"
            :key="key"
            class="cursor-pointer template-item"
            @click="selectItem(item)"
            :class="{ active: form.templateId === item.templateId }"
          >
            <a-image
              :src="item.imgSrc"
              width="100%"
              height="80px"
              :preview="false"
              :description="item.templateName"
            >
            </a-image>
          </div>
        </div>
      </a-spin>
      <ul v-if="table.data.length === 0" class="grid-list">
        <a-empty />
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getTemplate, listTemplate } from "@/api/service/template/template";
import { ITemplate } from "@/api/service/template/types";

import { ENUM_DATA_SCOPE, ENUM_MAJOR } from "@/enum/system.enum";
import { IQuery } from "@/interface/IAxios";
import { form } from "../priceTag/data/form";
import { dispatchParams, showDispatch } from "./form";

const t = translate("公共模块");
// const templateList = ref<Array<ITemplate>>([]);
// const loading = ref(true);
const table = useTable<ITemplate>();
const query = useQuery<IQuery<ITemplate>>({
  resolutionId: "",
  templateName: "",
  major: ENUM_MAJOR.MAIN,
  orderByColumn: "create_time",
  isAsc: "desc",
  scope: ENUM_DATA_SCOPE.THIS_SHOP,
  templateId: ""
});
const getList = async () => {
  try {
    table.value.loading = true;
    query.value.resolutionId = form.value.resolutionId || "";
    const data = await listTemplate(query.value);
    table.value.data = data.rows.map((item) => {
      item.imgSrc += `?cache=${Math.random().toFixed(4)}`;
      return item;
    });
    query.value.total = data.total;
    table.value.loading = false;
  } catch (error) {
    table.value.loading = false;
  }
};

const pageChange = (num: number) => {
  query.value.pageNum = num;
  getList();
};

const selectItem = async (item: ITemplate) => {
  form.value.templateId = item.templateId!;
  dispatchParams.value.templateId = item.templateId!;
  /* 如果没有值，则判断是否携带价签的值 */
  dispatchParams.value.goodsList = (item.goodsList || []).map((v, i) => {
    const data = dispatchParams.value.selectedGoods.at(i);
    v.value = data;
    return v;
  });
  dispatchParams.value.currentScreen = "a";
};

const search = () => {
  query.value.pageNum = 1;
  getList();
};
watch(showDispatch, async (v) => {
  if (v) {
    query.value.resolutionId = form.value.resolutionId ?? "";
    query.value.templateName = "";
    getList();
    if (form.value.templateId) {
      const data = await getTemplate(form.value.templateId);
      data.data.goodsList = dispatchParams.value.goodsList;
      selectItem(data.data);
    }
  }
});
</script>

<style lang="scss" scoped>
.active {
  border: 1px solid var(--primary) !important;
}

.template-item {
  border: 1px solid #adadad;
}
</style>
